<template>
	<view class="all">
		<u-navbar title="商品详情" leftText="返回" @rightClick="rightClick" :autoBack="true" />
		<!-- 商品详情 -->
		<view class="goods">
			<u-swiper :height="450" :list="list4" keyName="url" :autoplay="true"></u-swiper>
		</view>
		<view class="tab">
			<u-subsection activeColor="#83b63a" bgColor='#83b63a' inactiveColor='white' fontSize='24' :bold='true'
				@change="sectionChange" :list="list" :current="current"></u-subsection>
		</view>
		<view class="main">
			<view class="goodInfo">
				<view class="title">
					<text class="name">{{goods.name}}</text>
					<u-tag :text="goods.type" style="width: 70px;" plain size="mini" type="success"></u-tag>
				</view>
				<view class="count">
					<text class="name">认养时间:{{goods.adoptionTime}}</text>
					<text class="name">健康状态:{{goods.healthStatus}}</text>
					<text class="name">生活地点:{{goods.address}}</text>
				</view>
			</view>
			<!-- 活动记录 -->
			<view class="active">
				<view class="title">
					<text class="name">活动记录</text>
				</view>
				<view class="count">
					<text class="name" v-for="(item) in activities">{{item.times}} - {{item.desc}} <text
							class="lookActive"> 观看记录</text> </text>
				</view>
			</view>
			<!-- 溯源记录 -->
			<view class="traceabilityRecords">
				<text class="name">溯源记录</text>
				<step></step>
			</view>
		</view>
	</view>
</template>

<script>
	import step from '@/pages/componment/step.vue'
	export default {
		components: {
			step
		},
		data() {
			return {
				name: '农场列表',
				list: ['现场照片', '视频监控'],
				current: 0,


				list4: [{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				}, {
					url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}],
				goods: {
					name: '走地鸡',
					type: '北京油鸡',
					adoptionTime: '2023年8月6号',
					healthStatus: '优秀',
					address: '北京市密云区好再来农场'
				},
				activities: [{
					times: '2023.8.6 6:11',
					desc: '外出活动'
				}, {
					times: '2023.8.6 12:11',
					desc: '进食'
				}, {
					times: '2023.8.6 18:11',
					desc: '进食'
				}, {
					times: '2023.8.6 19:11',
					desc: '回家'
				}]

			};
		},
		onLoad() {},
		methods: {
			lookDetail() {

			},
			rightClick() {
				console.log('32324324234234234')
				// uni.switchTab({
				// 	url: '/pages/adoptionList/adoptionList'
				// })
			},
			sectionChange(index) {
				this.current = index;
			},
		}
	}
</script>

<style lang="less">
	.all {
		overflow: hidden;
	}

	.goods {
		margin-top: 88px;

	}

	.tab {
		padding-bottom: 10px;
		padding-top: 10px;
		width: 90vw;
		margin: 0 auto;
	}

	.main {
		width: 95vw;
		margin: 0 auto;
		padding-bottom: 100px;
	}

	.goodInfo {
		background-color: white;
		border-radius: 5px;

		.title {
			padding: 10px;
			display: flex;

			/deep/.u-tag--success--plain {
				background-color: #5ac725;
				color: wheat !important;
			}

			/deep/.u-tag__text--success {
				color: wheat !important;
			}

			.name {
				font-weight: 900;
				margin-right: 10px;
				font-size: 14px;
			}
		}

		.count {
			.name {
				display: block;
				font-size: 12px;
				color: #a1a1a0;
				padding: 2px 10px;
			}
		}
	}

	.active {
		background-color: white;
		border-radius: 5px;
		width: 95vw;
		margin-top: 10px;

		.title {
			padding: 10px;

			.name {
				font-weight: 900;
				font-size: 14px;
			}
		}

		.count {
			.name {
				display: block;
				font-size: 12px;
				// color: #a1a1a0;
				padding: 2px 10px;

				.lookActive {
					color: blue;
					margin-left: 30px;
					float: right;
				}
			}
		}
	}

	.traceabilityRecords {
		margin-top: 10px;
		background-color: white;
		border-radius: 5px;

		.name {
			padding: 10px;
			font-weight: 900;
			font-size: 14px;
		}
	}
</style>